<!DOCTYPE HTML>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <title>Nine Percent 档期展示z-index属性演示</title>
    <style type="text/css">
    body {
        width: 960px;
        margin: 0 auto;
        font-family: 微软雅黑;
        font-size: 18px;
        line-height: 1.8em;
    }

    h1 {
        color: green;
    }

    div {
        width: 100px;
        height: 100px;
        text-align: center;
    }

    .index1 {
        position: absolute;
        left: 150px;
        top: 150px;
        background-color: #aaa;
    }

    .index2 {
        background-color: #ccc;
        position: absolute;
        left: 190px;
        top: 190px;
    }

    .index3 {
        position: absolute;
        left: 230px;
        top: 230px;
        z-index: 3;
        background-color: #eee;
    }

    .index4 {
        z-index: 4;
        background-color: #9959;
    }
    </style>
</head>

<body>
    <h1>NINEPERCENT档期安排</h1>
    <div class="index4">完美餐厅遇见</div>
    <div class="index1">吃鸡综艺</div>
    <div class="index2">花路之旅</div>
    <div class="index3">高能少年团</div>
</body>

</html>
